<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Cache-Control" content="public, max-age=604800" />
    <meta http-equiv="Pragma" content="cache" />
    <title>📖 Guest Book 🙇🏻‍♂️</title>
    <style>
      body,
      html {
        overflow-x: hidden;
      }
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
        background-color: #f8f9fa;
      }
      .link {
        text-decoration: none;
        color: #00a8c9;
      }
      .review-columns {
        columns: 1;
        column-gap: 20px;
      }
      .review-card {
        background-color: #ffffff;
        border: 1px solid #e1e4e8;
        border-radius: 10px;
        margin: 0 0 20px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        text-decoration: none;
        color: inherit;
      }
      .review-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      .review-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
      }
      .review-avatar {
        border-radius: 50%;
        margin-right: 10px;
        width: 48px;
        height: 48px;
      }
      .review-author {
        font-weight: bold;
        color: #007bff;
      }
      .review-timestamp {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 3px;
        background-color: #e1e4e8;
        color: #757575;
        font-size: 0.75em;
        margin-left: 10px;
      }
      .review-body {
        margin-top: 10px;
        color: #333333;
        line-height: 1.5;
      }
      .review-body img {
        max-width: 100%;
        height: auto;
        border-radius: 5px;
      }
      .review-reactions {
        margin-top: 10px;
      }
      .header-card {
        background-color: #d3026e;
      }
      .header-card p {
        color: white;
      }
      .header-card p.click-here {
        color: #ffce00;
        font-weight: bolder;
        font-style: italic;
        font-size: 1.2em;
      }
      .reaction-chip {
        display: inline-block;
        padding: 5px 10px;
        margin: 5px 5px 0 0;
        border-radius: 15px;
        background-color: #e1e4e8;
        color: #333333;
        font-size: 0.85em;
      }
      /* Media queries for responsive design */
      @media (min-width: 600px) {
        .review-columns {
          columns: 2;
        }
      }
      @media (min-width: 900px) {
        .review-columns {
          columns: 3;
        }
      }
      .container {
        max-width: 100%;
        overflow: hidden;
      }

      .header {
        text-align: center;
        max-width: 800px;
        margin: 8px auto;
      }

      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @keyframes fadeOut {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(-5px); }
      }
      
      /* Style for the search box */
      .search-box {
        width: 95%;
        max-width: 600px;
        padding: 15px;
        margin: 10px auto;
        display: block;
        border-radius: 8px;
        border: 1px solid #ccc;
        font-size: 16px;
        outline: none;
        margin-left: auto;
        margin-right: auto;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
      }

      .search-box:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
      }

      /* Style for the review count */
      .review-count {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        padding: 8px;
        background: #f1f1f1;
        border-radius: 8px;
        display: inline-block;
        margin-left: 10px;
      }

      /* Style for the action bar */
      .action-bar {
        width: 90%;
        max-width: 800px;
        text-align: center;
        display: flex;
        justify-content: center;
        gap: 2em;
        margin: 0 auto 1em auto;
        align-items: center;
        flex-wrap: wrap;
      }


    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
      <h1>📖 App Privacy Policy Generator's Guest Book 🙇🏻‍♂️</h1>
        <div class="action-bar">
          <a href="/" class="link">↩️ Back to Web App</a>
          <a href="https://ko-fi.com/A443EQ6" target="_blank" class="link">☕️ Buy Me a Coffee</a>
          <span class="review-count">📊 Total Reviews: <span id="reviewCount">450</span></span>
        </div>
        <input type="text" id="searchInput" class="search-box" placeholder="Search reviews..." />
      </div>
      <div class="review-columns" id="reviewContainer">
        <a
          href="https://github.com/nisrulz/app-privacy-policy-generator/issues/65"
          target="_blank"
          class="review-card header-card"
        >
          <div class="review-body">
            <img src="./downloaded_images/banner.jpg" alt="Banner Image" />
            <p>
              Welcome to our virtual Guest Book! Feel free to leave some kind
              words about App Privacy Policy Generator, share your success
              stories, or even brag about the big names using our app.<br /><br />We
              love hearing how we've made your life easier!
            </p>
            <p class="click-here">↘ Click on this card to comment</p>
          </div>
        </a>
        {{#comments}}
        <a href="{{ html_url }}" target="_blank" class="review-card">
          <div class="review-header">
            <img
              src="{{ user.avatar_local }}"
              alt="{{ user.login }}"
              class="review-avatar"
            />
            <div class="review-author">{{ user.login }}</div>
            <div class="review-timestamp">{{ created_at_formatted }}</div>
          </div>
          <div class="review-body">{{{body}}}</div>
          <!-- Use triple braces to render HTML -->
          {{#reactions}}
          <div class="review-reactions">
            {{#heart}}
            <span class="reaction-chip">❤️ {{ heart }}</span>
            {{/heart}}
            {{#thumbs_up}}
            <span class="reaction-chip">👍 {{ thumbs_up }}</span>
            {{/thumbs_up}}
            {{#thumbs_down}}
            <span class="reaction-chip">👎 {{ thumbs_down }}</span>
            {{/thumbs_down}}
            {{#laugh}}
            <span class="reaction-chip">😄 {{ laugh }}</span>
            {{/laugh}}
            {{#hooray}}
            <span class="reaction-chip">🎉 {{ hooray }}</span>
            {{/hooray}}
            {{#confused}}
            <span class="reaction-chip">😕 {{ confused }}</span>
            {{/confused}}
            {{#rocket}}
            <span class="reaction-chip">🚀 {{ rocket }}</span>
            {{/rocket}}
            {{#eyes}}
            <span class="reaction-chip">👀 {{ eyes }}</span>
            {{/eyes}}
          </div>
          {{/reactions}}
        </a>
        {{/comments}}
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const reviewCountElement = document.getElementById("reviewCount");
        const searchInput = document.getElementById("searchInput");

        function getReviewCards() {
          return document.querySelectorAll(".review-card:not(.header-card)");
        }

        function updateReviewCount(count) {
          reviewCountElement.textContent = typeof count === "number" ? count : getReviewCards().length;
        }

        function showCard(card, show) {
          card.style.display = show ? "inline-block" : "none";
        }

        function filterReviews(query) {
          const cards = getReviewCards();
          query = query.trim().toLowerCase();
          let visible = 0;
          // Process cards in chunks to avoid blocking the UI
          let index = 0;
          const chunkSize = 100; // Adjust based on performance
          function processChunk() {
            const end = Math.min(index + chunkSize, cards.length);
            for (; index < end; index++) {
              const card = cards[index];
              const match = card.innerText.toLowerCase().includes(query);
              showCard(card, match);
              if (match) visible++;
            }
            if (index < cards.length) {
              requestAnimationFrame(processChunk);
            }
          }
          processChunk();
        }

        function debounce(fn, delay) {
          let timer;
          return function (...args) {
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, args), delay);
          };
        }

        function setupSearch() {
          searchInput.addEventListener("input", debounce(function () {
            filterReviews(searchInput.value);
          }, 200));
        }

        // Initialize
        updateReviewCount();
        setupSearch();
      });
    </script>
  </body>
</html>
